<template>
  <div class="">
    <!-- 背景插件 -->
    <vue-particles
        color="#fff"
        :particleOpacity="0.7"
        :particlesNumber="60"
        shapeType="circle"
        :particleSize="4"
        linesColor="#fff"
        :linesWidth="1"
        :lineLinked="true"
        :lineOpacity="0.4"
        :linesDistance="150"
        :moveSpeed="2"
        :hoverEffect="true"
        hoverMode="grab"
        :clickEffect="true"
        clickMode="push"
        class="lizi"
      >
      </vue-particles>
    <div class="content">
      <el-input
         type="text"
         placeholder="标题"
         v-model="text"
         maxlength="60"
         clearable
         show-word-limit
         style="width: 50%; margin-top: 100px; background: transparent"
         class="myClassInput">
      </el-input>
      <div style="margin: 20px 0;"></div>
      <el-input
         type="textarea"
         placeholder="内容"
         show-word-limit
         v-model="textarea"
         class="myClassInput">
      </el-input>
      <el-button
         type="primary"
         style="margin-top: 30px; margin-left: -100px;"
         @click="submit"
         class="myClassInput"
      >上传<i class="el-icon-upload el-icon--right"></i></el-button>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import Qs from 'qs'
export default {
  name: "modification",
  data() {
    return {
      text: '',
      textarea: '',
    }
  },
  methods: {
    submit() {
      let title = this.text
      let text = this.textarea
      if (title === '' && text === '') {
        this.open3()
      } else {
        let data = Qs.stringify({title,text})
        axios.post('/api/addWrites', data, {headers:{'Content-Type':'application/x-www-form-urlencoded'}}).then((res) => {
          console.log(res)
          this.open2()
        }).catch((error) => {
          console.log('error',error)
        })
      }
    },
    open3() {
      this.$message({
        message: '请填写 标题 和 内容 后提交',
        type: 'warning'
      });
    },
    open2() {
      this.$message({
        message: '提交成功',
        type: 'success'
      });
    },
  },
}
</script>

<style lang="">
  .myClassInput .el-input__inner {
    background-color: transparent;
    color: #fff;
  }
  .myClassInput .el-textarea__inner {
    background-color: transparent;
    color: #fff;
  }
  .myClassInput.el-button--primary {
    background-color: transparent;
    color: #fff;
    border: 1px solid #fff;
  }
</style>

<style scoped lang="less">
.content {
  width: 80%;
  position: absolute;
  background-color: transparent;
  top: 60px;
  left: 260px;
}
.lizi {
  background: #000;
  height: 700px;
}
</style>

